import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { Image, Empty } from "@nutui/nutui-react-taro";
import { useState, useEffect } from "react";
import { Marshalling, Eye } from "@nutui/icons-react-taro";
import { getExchangeList } from "@/api/course";
import dayjs from "dayjs";

const ExchangeRecord = () => {
  const [eye, setEye] = useState<any[]>([]);
  const [courseList, setCourseList] = useState<any[]>([]);
  const [page, setPage] = useState({
    pageNo: 1,
    pageSize: 20,
  });
  const getList = async () => {
    const res = await getExchangeList(page);
    setCourseList(res?.data?.list);
  };
  useEffect(() => {
    getList();
  }, []);
  Taro.usePullDownRefresh(async () => {
    await getList();
    Taro.stopPullDownRefresh();
  });
  return courseList?.length > 0 ? (
    <View className="bg-[#F5F5F5] p-3 h-screen box-border course-page">
      <View className="flex flex-col gap-4">
        {courseList?.map((item, index) => (
          <View
            key={item.id}
            className="flex justify-between items-center gap-4 rounded-md bg-white p-2"
          >
            <Image
              width={100}
              height={100}
              mode="aspectFit"
              radius="16rpx"
              src={require("../../assets/exchange/code.svg")}
            />
            <View className="flex-1 flex flex-col font-normal">
              <View className="flex justify-between items-center">
                <View className="text-[28rpx] text-[#222] flex-1 line-clamp-2">
                  {item?.opusName}
                </View>
                <View className="text-[28rpx] text-[#EF4D29]">兑换成功</View>
              </View>
              <View className="text-[26rpx] mt-2 mb-1 flex gap-2 items-center">
                <View className="flex-1">
                  兑换码：
                  {!eye[index] ? (
                    "******"
                  ) : (
                    <Text
                      className="text-[#673ab7]"
                      onClick={() =>
                        Taro.setClipboardData({ data: item?.exchangeCode })
                      }
                    >
                      {item?.exchangeCode}
                    </Text>
                  )}
                </View>
                {!!eye[index] ? (
                  <Eye
                    onClick={() =>
                      setEye((prev) => {
                        const newEye = [...prev];
                        newEye[index] = false;
                        return newEye;
                      })
                    }
                  />
                ) : (
                  <Marshalling
                    onClick={() =>
                      setEye((prev) => {
                        const newEye = [...prev];
                        newEye[index] = true;
                        return newEye;
                      })
                    }
                  />
                )}
              </View>
              <View className="text-sm text-[#999]">
                {dayjs(item?.exchangeTime).format("YYYY-MM-DD HH:mm:ss")}
              </View>
            </View>
          </View>
        ))}
      </View>
    </View>
  ) : (
    <View className="flex justify-center items-center min-h-screen bg-white">
      <Empty
        description={
          <View className="text-sm text-gray-500 mt-4">暂无数据</View>
        }
        image={require("../../assets/course/wu.svg")}
      />
    </View>
  );
};

export default ExchangeRecord;
